<template>
<div class="bg">
  <x-header :left-options="{preventGoBack:true, backText: ''}" class="ret"  @on-click-back="backSave">
      <div class="retTitle">个人信息</div>
      <a slot="right" @click="quitMember" style="fill:#fff;">退出</a>
  </x-header>
    <group title="" label-width="4.5em" label-margin-right="5em" label-align="left" >
      <cell title="用户昵称" :value="nickname" is-link style="font-size:14px;" @click.native="onClick" value-align="right"></cell>
      <cell title="真实姓名" :value="name" is-link style="font-size:14px;" @click.native="onClick" value-align="right"></cell>
      <!-- <popup-radio title="性别" :options="sex" style="font-size:14px;" v-model="sexValue" placeholder="未设置" value-align="right"></popup-radio> -->
      <cell title="手机号" :value="phone" is-link style="font-size:14px;" value-align="right"></cell>
    </group>
    <group title="" label-width="4.5em" label-margin-right="5em" label-align="left" >
      <cell title="QQ" :value="QQ" is-link style="font-size:14px;" @click.native="onClick" value-align="right"></cell>
      <cell title="邮箱" :value="email" is-link style="font-size:14px;" @click.native="onClick" value-align="right"></cell>
      <!-- <x-address title="地址" v-model="addressValue" style="font-size:14px;" raw-value :list="addressData" value-text-align="right" label-align="justify"></x-address> -->
    </group>
  <div class="btn_wrap">
    <x-button plain  @click.native="save">保存</x-button>
  </div>

  <div v-transfer-dom>
      <!-- 等待窗口 -->
      <x-dialog v-model="loading" :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
        <div class="divloading">
          <div class="rightTop" @click="loading = false"><x-icon type="ios-close-empty" style="fill:#fff;"></x-icon></div>
          <div>
            <p><spinner type="android" :size="'40px'"></spinner></p>
            <p style="color:#fff;">{{ dialogMsg }}</p>
          </div>
        </div>
      </x-dialog>

      <!-- <x-dialog v-model="showToast" class="dialog-demo">
          <div style="padding:15px;">
              <group :title="'请输入'">
                  <x-input placeholder="输入昵称" v-model="nickname"  :min="4" :max="20"></x-input>
                  <x-input placeholder="输入姓名" v-model="name" :min="4" :max="20"></x-input>
                  <x-input placeholder="输入QQ" v-model="QQ" type="number"></x-input>
                  <x-input placeholder="输入邮箱" v-model="email" type="email"></x-input>
              </group>
          </div>
          <div>
              <x-button type="primary" @click.native="commit">确定</x-button>
          </div>
          <div @click="closeDialog">
              <span class="vux-close"></span>
          </div>
      </x-dialog> -->

      <confirm v-model="showConfirm"
        :title="'提示'"
        @on-cancel="onCancel"
        @on-confirm="onConfirm">
          <p style="text-align:center;">{{ '确定更换手机号？' }}</p>
      </confirm>
    </div>
</div>
</template>

<script>
import { Confirm,Spinner,XDialog,XButton,XHeader,Group,Cell,ChinaAddressData, XAddress, PopupRadio, 
  TransferDomDirective as TransferDom } from 'vux';

import { isWeiXin,getWXLoginUrl,urlParse,getTCodeUrl } from '@/assets/js/utils';    //获取url参数

 export default {
  directives: {
    TransferDom
  },
    components: { Confirm,Spinner,XDialog,XButton,XHeader,Group, Cell, ChinaAddressData, XAddress, PopupRadio },
    data() {
      return{
        conf: false,
        showConfirm: false,
        loading:false,
        phone: sessionStorage.getItem("phone"),
        loginId: sessionStorage.getItem("loginId"),
        openid: sessionStorage.getItem("openid"),
        dialogMsg:'请稍候...',
        more: '/UMore',
        name: '',
        nickname: '',
        phone:'',
        QQ:'',
        email: '',
        sex: [{
          key: '1',
          value: '男'
        }, {
          key: '2',
          value: '女'
        } ],
        sexValue: '',
        addressData: ChinaAddressData,
        addressValue: ['广西壮族自治区', '南宁市', '青秀区'],
        memberInfo: null  //平台会员信息
      }
    },
    created() {
      
    // this.loginId = sessionStorage.getItem("loginId"); 
    // // this.password = sessionStorage.getItem("password"); 
    // this.phone = sessionStorage.getItem("phone");  
    // this.openid = sessionStorage.getItem("openid");
// console.log("openid: "+this.openid)
      // this.memberInfo = JSON.parse(localStorage.getItem("memberpt"));
      this.memberInfo = this.$store.state.memberInfoPt;
      if(this.memberInfo == null) return;
      // console.log('this.memberInfo: '+this.memberInfo)
      // console.log('weixbh: '+this.memberInfo.weixbh+ '-----sex: '+ this.sex[0].key)

      let n = this.memberInfo.xingm;
      this.name = n;
      this.nickname = this.memberInfo.mingc;
      this.sex.key = this.memberInfo.xingb;
      this.sexValue = this.sex.value;
      this.phone = this.memberInfo.dianh;
      this.QQ = this.memberInfo.QQ;
      this.email = this.memberInfo.email;

      // console.log('weixbh: '+this.memberInfo.weixbh+ '-----sex: '+ this.sex[0].key)
    },
    methods: {
      getPhone(){
        if (this.phone != null && this.phone != '' && this.phone != 'null'){
          this.showConfirm = true;
        }else{
          this.showConfirm = false;
          this.$router.push("/URegister");
        }
      },
      backSave(){
        // console.log("backSave") 
        this.$router.push("/Member/"+this.openid);
      },
      save(){
        this.loading = true
        // console.log(this.loading)
        // this.loading = false
        // console.log(this.loading)
      },
      loadingClose(){
        this.loading = false
        // console.log(this.loading)
      },
      quitMember(){
        // localStorage.removeItem("memberpt");  //移除平台会员信息
        // localStorage.removeItem("membersj");  //移除商家会员信息
        this.$store.commit("addMemberInfoSj", null);
        this.$store.commit("addMemberInfoPt", null);
        
        // sessionStorage.removeItem("phone");  //移除phone
        // sessionStorage.removeItem("loginId");  //移除loginid
        // sessionStorage.removeItem("openid");  //移除openid
        let m = this.$store.state.memberInfoPt; 
        // console.log("memberinfo: "+m)

        let tcode = getTCodeUrl(); 
        let url = window.location.protocol+"//"+window.location.host + "/"+tcode + "#/Member/null";
        // console.log(url)
        // window.location.href = url;
        this.$router.push("/Member/null");
        // window.location.reload();
      },
      onCancel(){
        this.conf = false;
        this.showConfirm = false;
      },
      onConfirm(){
        this.conf = true;
        this.showConfirm = false;
        this.$router.push("/URegister");
      }
    }
 }

</script>
           
<style scoped lang="less">
.ret {
    background-color:#fff; 
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 } 
.btn_wrap {
    margin:0 auto;
    padding: 0 1rem;
    margin-top: 1rem;
    background-color:#fff; 
} 
.bg{
  background-color:#f3f3f3
}

div.rightTop{
  position:absolute;
  right:0;
  top:0;
  padding: 0 1rem;
  margin-top: 1rem;
}
div.divloading{
  // width:400px;  
  height:50px;  
  // border:1px solid #666;  
  overflow:hidden;  
  position:relative;  
  display:table-cell;  
  text-align:center;  
  vertical-align:middle;  
}
</style>